<template>
	<view class="box">
		<view class="box_t">
			<view class="">
				<mescroll-uni ref="mescrollRef" height='1300' :fixed="false" @init="mescrollInit" @up="upCallback"
					:up="upOption" :down="{use: false}">
						<view class="problem-wrapper" v-show="boardList.length<1">
							<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
							<view class="">~ 空空如也 ~</view>
						</view>
					<template v-for="(item,index) in boardList">
						<view class="top" v-if="boardList.length>0" :kye='index'>
							<view class="top_logo">
								<image src="../../../src/imgs/test.jpg" mode="aspectFill"></image>
							</view>
							<view class="top_name">
								<view class="top_na">
									<text>{{item.user_name}}</text>
									<text @click="remove(item.id)">删除</text>
								</view>
								<view class="top_text">
									{{item.content}}
								</view>
								<view class="top_img">
									<template v-for="item1 in item.image_path">
										<u--image v-if="item1" @click="previewImage(item1)" mode="aspectFill"
											radius="14rpx" width="170rpx" height="170rpx"
											:src="item1 ? item1.replace(/\\/g,'/') : ''"></u--image>
									</template>
								</view>
								<view class="top_time">
									<text>{{item.update_time.substring(0,10)}}</text>
								</view>
								<view class="top_but">
									<button type="default" @click="setbut(item)">评论</button>
								</view>
								<view class="" v-if="item.comment!=''">
									<scroll-view class="top_textarea" :scroll-y=true>
										<template v-for="item11 in item.comment">
											<view class="" v-if="item11.content!==''"
												style="display: flex;justify-content: space-between; font-size: 30rpx;">
												<view class="" @longtap='longremove(item11.id)' @click="setbut(item11)">
													<view class="" v-if="item11.reply_to_id===0">
														<text style="color: #7F98AE;">{{item11.user_name}}:</text>
														<text style="padding-left: 10rpx;">{{item11.content}}</text>
													</view>
													<view class="" v-if="item11.reply_to_id!==0">
														<text
															style="color: #7F98AE;">{{item11.reply_name}}</text><text>回复</text><text
															style="color: #7F98AE;">{{item11.user_name}}:</text> <text
															style="padding-left: 10rpx;">{{item11.content}}</text>
													</view>
												</view>
											</view>
										</template>
									</scroll-view>
								</view>
							</view>
						</view>
					</template>
				</mescroll-uni>
			</view>
		</view>
		<u-popup mode="center" :show="show" @close="closeQuestionPop" :round="25">
			<view class="up-text">
				<view class="" style="padding:30rpx 40rpx;">
					<view class="" style="color: #46464A;font-size: 30rpx;">
						<!-- <text>用户名：</text><text>{{arr.nick_name}}</text> -->
					</view>
					<view class="" style="margin-top: 20rpx;">
						<u--textarea style='color:#7F98AE ;' placeholder="请输入留言内容" v-model="uptext"></u--textarea>
					</view>
					<view class="form-item upload-wrap">
						<view class="label">上传照片：</view>
						<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="6"
							:style="{position:'relative',height:fileList.length == 0 ? '44rpx' : 'unset',border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', borderRadius: '20rpx'}">
							<view class="iconfont icon-tupian"></view>
						</u-upload>
					</view>
					<view class="">
						<button class="subil" @click="setsub" type="default">提交</button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 评论 -->
		<u-popup mode="center" :show="showPing" @close="closePing" :round="25">
			<view class="up-text">
				<view class="" style="padding:30rpx 40rpx;">
					<view class="" style="margin-top: 20rpx;">
						<u--textarea style='color:#7F98AE ;' placeholder="请输入评论内容" v-model="setPingtext"></u--textarea>
					</view>
					<view class="">
						<button class="subil" @click="setPing" type="default">确定</button>
					</view>
				</view>
			</view>
		</u-popup>
		<image @click="setAdd" class="add" src="@/src/imgs/message-board.png" mode=""></image>
	</view>
</template>

<script>
	import {
		boardAdd,
		addComments,
		boardList,
		boardDeleteMessage,
		boardDeleteComments
	} from '@/api/messageBoard.js'
	import {
		uploadUrl
	} from '@/baseUrl.js'
	export default {
		data() {
			return {
				show: false,
				showPing: false,
				userId: 0,
				value: '',
				uptext: '',
				arr: '',
				boardList: [],
				pageSize: 10,
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				fileList: [],
				setPingtext: '',
				pingId: '',
				pingUserId: ''
			}
		},
		created() {
			this.getuserId()
			// this.getBoardList()
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id,
						file_path: result.data.file_path,
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
			getuserId() { //从本地储存获取用户个人信息  {id}
				let a = uni.getStorageSync('user_info')
				let arr = JSON.parse(a)
				this.arr = arr
				// console.log(arr)
			},
			setAdd() {
				this.show = true
			},
			closeQuestionPop() {
				this.show = false
			},
			async getBoard() {
				let {
					data
				} = await boardList({
					user_id: this.arr.user_id,
					page_size: this.pageSize,
					page_num: 1
				})
				this.boardList = data.data.data
				// console.log(data)
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				// console.log(page.num)
				const {
					data
				} = await boardList({
					user_id: this.arr.user_id,
					page_size: this.pageSize,
					page_num: page.num
				});
				// console.log(data.data.data)
				this.boardList = data.data.data
				// console.log(this.arr.user_id)
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data;
					curPageData.forEach((item, idx) => {
						curPageData[idx].code = idx + 1 + (page.num - 1) * this.pageSize
					});
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.last_page;
					//设置列表数据
					// console.log(this.boardList)
					if (page.num == 1) {
						this.boardList = []; //如果是第一页需手动置空列表
						this.boardList = this.boardList.concat(curPageData); //追加新数据
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
					}
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen)
					}, 20)
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async setsub() { //新增动态
				uni.showLoading({
					title: '加载中...'
				});
				let imgs = this.fileList.map(item => {
					return item.url
				})
				var images = imgs.toString()
				// console.log(typeof images ,images)
				let {
					data
				} = await boardAdd({
					content: this.uptext,
					user_id: this.arr.user_id,
					image: images
				})
				if (data.code == 1 || data.code == 200) {
					this.getBoard()
				}
				uni.hideLoading();
				// console.log('动态新增',data)
				this.show = false
			},
			async remove(id) { //动态删除
				// console.log(id)
				if (id) {
					uni.showModal({
						title: '确定删除？',
						success: async (res) => {
							if (res.confirm) {
								let {
									data
								} = await boardDeleteMessage({
									message_id: id
								})
								console.log('动态删除', data)
							}
						}
					});
				}

			},
			setbut(item) { //评论     回复    判断功能
				if (item.user_id !== this.arr.user_id) {
					this.userId = item.user_id
				} else {
					this.userId = 0
				}
				this.pingId = item.id
				this.pingUserId = item.user_id
				this.showPing = true
			},
			async longremove(id) {
				if (id) {
					uni.showModal({
						title: '确定删除？',
						success: async (res) => {
							if (res.confirm) {
								let {
									data
								} = await boardDeleteComments({
									comment_id: id
								})
								this.getBoard()
								// console.log('评论删除', data)
							}
						}
					});
				}

			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				});
			},

			closePing() {
				this.showPing = false
			},
			async setPing() { //评论提交
				// console.log(this.userId)
				uni.showLoading({
					title: '发布中...'
				})
				let {
					data
				} = await addComments({
					content: this.setPingtext,
					message_id: this.pingId,
					user_id: this.pingUserId,
					reply_to_id: this.userId
				})
				if (data.code == 1) {
					this.userId = 0
					this.pingId = ''
					this.pingUserId = ""
					this.setPingtext=''
					this.getBoard()
				}
				uni.hideLoading();
				console.log('评论提交', data)
				this.showPing = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.up-text {
		width: 700rpx;
		height: auto;
	}
	.problem-wrapper {
		color: #808080;
		margin: 0 auto;
		text-align: center;
		image {
			margin-top: 300rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}
	.box {
		width: 100%;
		height: 100rpx;
		background-color: #2858FC;
		position: relative;

		.add {
			position: fixed;
			bottom: 0rpx;
			right: 30rpx;
			width: 144rpx;
			height: 144rpx;
		}

		.box_t {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;

			

			.top {
				padding: 50rpx 30rpx;
				display: flex;
				border-bottom: 4rpx solid #F2F2F0;
				.top_logo {
					width: 136rpx;
					height: 110rpx;

					image {
						width: 136rpx;
						height: 110rpx;
					}
				}

				.top_name {
					width: 100%;
					padding-left: 20rpx;

					.top_na {
						display: flex;
						justify-content: space-between;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #7F98AE;
					}

					.top_text {
						margin-top: 25rpx;
						font-size: 30rpx;
						line-height: 38rpx;
						letter-spacing: 1rpx;
					}

					.top_img {
						display: flex;
						margin-top: 34rpx;
						justify-content: space-between;
						flex-wrap: wrap;
					}

					.top_time {
						margin-top: 26rpx;
						font-size: 16rpx;
						font-weight: 500;
						color: #7F98AE;
					}

					.top_but {
						float: right;
						margin-bottom: 20rpx;

						button {
							height: 60rpx;
							border-radius: 0rpx;
							text-align: center;
							float: right;
							line-height: 60rpx;
							color: #7F98AE;
							font-weight: bold;
							letter-spacing: 2rpx;
							font-size: 24rpx;
						}
					}

					.top_textarea {
						width: 97%;
						padding: 9rpx;
						margin-top: 50rpx;
						height: 88rpx;
						overflow: hidden;
						background-color: #F2F2F0;
					}
				}
			}
		}
	}

	.form-item {
		width: 600rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		&:last-child {
			margin-bottom: 34rpx;
		}

		&.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
		}

		@include clear();

		.label {
			float: left;
			width: 150rpx;
			height: 48rpx;
			text-align: left;
			line-height: 44rpx;
			font-size: 26rpx;
			color: #46464a;
		}

		/deep/ .u-upload__wrap {
			// width: calc(100% - 206rpx) !important;
			width: calc(100%) !important;
			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		/deep/ .u-radio-label--left {
			margin-right: 55rpx;
		}

		/deep/ .u-radio__text {
			font-size: 26rpx !important;
			color: #46464a !important;
		}

		.input {
			float: left;
			width: calc(100% - 134rpx - 3rpx);
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;

			.input-body {
				box-sizing: border-box;
				width: 100%;
				height: 44rpx;
				padding: 0 !important;
				border: none;
				padding-left: 30rpx !important;
				padding-right: 30rpx !important;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.7);
			}

			.input-placeholder {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}

	}

	.subil {
		width: 320rpx;
		height: 70rpx;
		line-height: 70rpx;
		letter-spacing: 20rpx;
		font-size: 35rpx;
		border-radius: 50rpx;
		background-color: #0535D6;
		color: #fff;
		margin-top: 22rpx;
	}
</style>
